<template>
  <k-view class="distribution-block">
    <k-view class="distribution-title">
      <k-text class="distribution-title-text">{{ currentItem.label }}得分分布</k-text>
    </k-view>
    <reload-view v-if="isEmpty || isLoading" :loading="isLoading" @reload="reload"> </reload-view>
    <k-view class="distribution-content" v-else>
      <DistributionHistogram :originData="chartData"></DistributionHistogram>
      <k-view class="rank-list-view">
        <k-view v-for="(item, index) in cardList" :key="index">
          <rank-card :cardInfo="item" @clickAction="info => rankCardCLick(info, index)"></rank-card>
        </k-view>
      </k-view>
    </k-view>
  </k-view>
</template>

<script>
import RankCard from '@/components/StockDiagnosis/rankCard.vue';
import {
  formatChgString,
  formatChgStringColor,
  previousPeriod,
  formatChgStringScore,
} from '@/utils';
import { sendClickStat } from '@/utils/stat';
import { INDEX_TAB_ID, PAGEID } from '@/config/stat';
import reloadView from '@/components/Home/rankReload.vue';

export default {
  props: {
    isEmpty: {
      type: Boolean,
      default: false,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    chartData: {
      type: Array,
      default: [],
    },
    statistcsType: {
      type: Number,
      default: 1,
    },
    currentItem: {
      type: Object,
      default: () => {
        return {
          code: '',
          label: '',
          value: '',
        };
      },
    },
    detailData: {
      type: Object,
    },
  },
  components: {
    reloadView,
    RankCard,
  },
  data() {
    return {
      type: '市场',
    };
  },
  methods: {
    reload() {
      this.$emit('reload');
    },
    createRankDataMarket(info) {
      const listData = [];
      listData.push({
        type: 'stock',
        title: '健康度最高分',
        info: info.score_top_three[0]?.name,
        stockInfo: {
          stockCode: info.score_top_three[0]?.code,
          market: info.score_top_three[0]?.market,
        },
        subInfo: {
          name: 'NO.1',
          score: formatChgString(info.score_top_three[0]?.score, 2),
          color: 'black',
        },
      });
      listData.push({
        type: 'stock',
        title: '分数增幅最大',
        info: info.score_inc_highest?.name,
        stockInfo: {
          stockCode: info.score_inc_highest?.code,
          market: info.score_inc_highest?.market,
        },
        subInfo: {
          name: previousPeriod,
          score: formatChgStringScore(info.score_inc_highest?.score_inc, 2),
          color: formatChgStringColor(info.score_inc_highest?.score_inc),
        },
      });
      listData.push({
        type: 'stock',
        title: '排名增幅最大',
        info: info.rank_inc_highest?.name,
        stockInfo: {
          stockCode: info.rank_inc_highest?.code,
          market: info.rank_inc_highest?.market,
        },
        subInfo: {
          name: previousPeriod,
          score: formatChgStringScore(info.rank_inc_highest?.rank_inc),
          color: formatChgStringColor(info.rank_inc_highest?.rank_inc),
        },
      });
      return listData;
    },
    createRankDataStock(info) {
      const listData = [];
      if (info.score_top_three.length > 0) {
        info.score_top_three.forEach((element, index) => {
          listData.push({
            type: 'stock',
            title: element.industry_name,
            info: element.name,
            stockInfo: {
              stockCode: element.code,
              market: element.market,
            },
            tagInfo: {
              rank: index + 1,
            },
            subInfo: {
              name: '',
              score: `${formatChgString(element.rank)}/${formatChgString(element.company_num)}`,
              color: 'black',
            },
          });
        });
      }
      return listData;
    },
    createRankDataRegion(info) {
      const listData = [];
      listData.push({
        type: 'stock',
        title: '地区最高分',
        info: info.score_top_three[0]?.name,
        stockInfo: {
          stockCode: info.score_top_three[0]?.code,
          market: info.score_top_three[0]?.market,
        },
        subInfo: {
          name: `NO.${info?.score_top_three[0]?.rank || '--'}`,
          score: formatChgString(info.score_top_three[0]?.score, 2),
          color: 'black',
        },
      });
      listData.push({
        type: 'stock',
        title: '地区上升最快',
        info: info.score_inc_highest?.name,
        stockInfo: {
          stockCode: info.score_inc_highest?.code,
          market: info.score_inc_highest?.market,
        },
        subInfo: {
          name: previousPeriod,
          score: formatChgStringScore(info.score_inc_highest?.score_inc, 2),
          color: formatChgStringColor(info.score_inc_highest?.score_inc),
        },
      });
      listData.push({
        type: 'stock',
        title: '地区龙头',
        info: info.leading?.name,
        stockInfo: {
          stockCode: info.leading?.code,
          market: info.leading?.market,
        },
        subInfo: {
          name: `NO.${info.leading?.rank}`,
          score: formatChgString(info.leading?.score, 2),
          color: 'black',
        },
      });
      return listData;
    },
    createRankDataIndustry(info) {
      const listData = [];
      listData.push({
        type: 'stock',
        title: '行业最高分',
        info: info.score_top_three[0]?.name,
        stockInfo: {
          stockCode: info.score_top_three[0]?.code,
          market: info.score_top_three[0]?.market,
        },
        subInfo: {
          name: `NO.${info.score_top_three[0]?.rank}`,
          score: formatChgString(info.score_top_three[0]?.score, 2),
          color: 'black',
        },
      });
      listData.push({
        type: 'stock',
        title: '行业上升最快',
        info: info.score_inc_highest?.name,
        stockInfo: {
          stockCode: info.score_inc_highest?.code,
          market: info.score_inc_highest?.market,
        },
        subInfo: {
          name: previousPeriod,
          score: formatChgStringScore(info.score_inc_highest?.score_inc, 2),
          color: formatChgStringColor(info.score_inc_highest?.score_inc),
        },
      });
      listData.push({
        type: 'stock',
        title: '行业龙头',
        info: info.leading?.name || '暂无数据',
        stockInfo: {
          stockCode: info.leading?.code,
          market: info.leading?.market,
        },
        subInfo: {
          name: info.leading?.rank ? `NO.${info.leading?.rank}` : '',
          score: formatChgString(info.leading?.score, 2),
          color: 'black',
        },
      });
      return listData;
    },
    rankCardCLick(item, index) {
      if (this.statistcsType === 1 || this.statistcsType === 2) {
        sendClickStat(
          `${PAGEID.INDEX}.${INDEX_TAB_ID[this.statistcsType]}.recommend.${index + 1}.click`
        );
      } else {
        sendClickStat(
          `${PAGEID.INDEX}.${INDEX_TAB_ID[this.statistcsType]}.${
            item.stockInfo.stockCode
          }.recommend.${index + 1}.click`
        );
      }
    },
  },
  computed: {
    cardList() {
      const getRankData = {
        1: this.createRankDataMarket,
        2: this.createRankDataStock,
        3: this.createRankDataIndustry,
        4: this.createRankDataRegion,
      };
      const cardlistFn = getRankData[this.statistcsType];
      return cardlistFn ? cardlistFn(this.detailData) : [];
    },
  },
};
</script>

<style lang="less">
.distribution-block {
  width: 100%;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  .distribution-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .distribution-title-text {
      font-size: 36px;
      color: #262626;
      font-weight: 500;
      line-height: 50px;
    }
  }
  .distribution-content {
    .rank-list-view {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 28px;
    }
  }
}
[theme-mode='black'] {
  .distribution-block {
    background-color: #1c1c1c;
    .distribution-title-text {
      color: rgba(255, 255, 255, 0.84);
    }
  }
}
</style>
